import React, { useEffect, useState } from "react";
import style from "../index/index.module.css";
import {  useNavigate } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import request from "../../api/request";
import { InfiniteScroll, List } from "antd-mobile";
import { Collapse } from "antd-mobile";
import dayjs from "dayjs";
function Index() {
  const navigate = useNavigate();
  const start = "北京";
  const end = "三亚";
  const [plane, setPlane] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);
  const [date] = useState(dayjs().format("YYYY-MM-DD"));
  const FeachList = async () => {
    const res = await request.get("/api/trip/airplane", {
      params: { start, end, page },
    });
    console.log(res);
    if (res.code === 200) {
      setPlane([...plane, ...res.data]);
      setPage(page + 1);
    }

    if (res.data.length === 0) {
      setHasMore(false);
    }
  };
  useEffect(() => {
    FeachList();
  }, []);

  const goList = (item) => {
    navigate(`/list?start=${start}&end=${end}`, { state: item });
  };
  return (
    <div>
      <NavBar className={style.head}>
        {start}→{end}
        <div className={style.hea} style={{ paddingTop: 20 }}>
          <span>前一天</span>
          <span>{date}</span>
          <span>后一天</span>
        </div>
      </NavBar>

      <div style={{ paddingTop: 100 }}>
        {plane.length > 0 &&
          plane.map((item, index) => (
            <div
              onClick={() => goList(item)}
              className={style.plane}
              key={index}
            >
              <span>{item.ast}</span>
              <span>{item.aat}</span>
              <span>{item.dst}</span>
              <span></span>

              <span>{item.aasn}</span>
              <span>{item.fprt}</span>
              <span>{item.sc}</span>
              <span style={{ fontSize: "18px" }}>￥{item.timespanNumber}</span>

              <span>二等座 有票</span>
              <span>一等座 有票</span>
              <span>特等座 18票</span>
              <span></span>
            </div>
          ))}

        <Collapse accordion>
          <Collapse.Panel key="1" title="车次已售完">
           
          <div className={style.planes}>
             <span>21:03</span>
            <span>D1231</span>
            <span>21:03</span>
            <span></span>

            <span>合肥南</span>
            <span>D12</span>
            <span>合肥南</span>
            <span>￥672</span>
          </div>

          </Collapse.Panel>
        </Collapse>
      </div>
      <InfiniteScroll loadMore={FeachList} hasMore={hasMore} />
    </div>
  );
}

export default Index;
